<template>
    <div class="app-container">
        <levelbar></levelbar>
        <el-form label-width="100px" class="app-content" ref="ruleForm" label-position='left'>
            <div class="box">
            <div class="appTitle">银行卡信息（经销商）</div>
                <el-row>     
                    <el-col :span="9" class='boxCon'>
                        <el-row>
                            <div class="appTop"><P>身份证信息</p></div>
                            <table class='table' align="left">
                                <tr><td>姓名：</td><td>{{sName}}</td></tr>
                                <tr><td>身份证号：</td><td>{{cardNum}}</td></tr>
                            </table>
                        </el-row>
                        <el-row>
                            <div class="appTop"><P>其他材料</p></div>
                            <table class='table' align="left">
                                <tr><td>营业执照：</td><td><a :href="licene" :download="download(licene)" v-if='licene'>点击下载</a><span v-if='!licene'>无</span></td></tr>
                                <tr><td>开户许可证：</td><td><a :href="openAccount" :download="download(openAccount)" v-if='openAccount'>点击下载</a><span v-if='!openAccount'>无</span></td></tr>
                                <tr><td>手持身份证正面：</td><td><a :href="cardFace" :download="download(cardFace)" v-if='cardFace'>点击下载</a><span v-if='!cardFace'>无</span></td></tr>
                                <tr><td>手持身份证反面：</td><td><a :href="cardBack" :download="download(cardBack)" v-if='cardBack'>点击下载</a><span v-if='!cardBack'>无</span></td></tr>
                            </table>
                        </el-row>
                    </el-col>
                    <el-col :span="9" :offset="5">
                        <div class="appTop"><P>银行账户信息</p></div>
                        <table class='table' align="left">
                            <tr><td>银行卡开户名：</td><td>{{accountName}}</td></tr>
                            <tr><td>账户：</td><td>{{account}}</td></tr>
                            <tr><td>所属银行：</td><td>{{bankName}}</td></tr>
                            <tr><td>开户行所在城市：</td><td>{{bankAddress}}</td></tr>
                            <tr><td>开户行名称：</td><td>{{openName}}</td></tr>
                            <tr><td>预留手机号：</td><td>{{telephone}}</td></tr>
                        </table>
                    </el-col>
                </el-row>

                <el-row class='boxCon'>            
                    <el-col :span="9">
                        <div class="appTop"><P>审核信息</p></div>
                        <table class='table' align="left">
                            <tr><td>机构类别：</td><td><span>经销商</span></td></tr>
                            <tr><td>机构名称：</td><td>{{orgName}}</td></tr>
                            <tr><td>地区：</td><td><el-button type='text' @click='areaDetail'>详情</el-button></td></tr>
                            <tr><td>负责人：</td><td>{{resName}}</td></tr>
                            <tr><td>手机号：</td><td>{{mobile}}</td></tr>
                            <tr><td>申请时间：</td><td>{{auditTime}}</td></tr>
                            <tr><td>审核时间：</td><td>{{finishTime}}</td></tr>
                            <tr><td>审核人：</td><td><span v-if="userName">{{userName}}</span><span v-if="!userName">无</span></td></tr>
                            <tr><td>备注（驳回原因）：</td><td>{{reason}}</td></tr>
                        </table>
                    </el-col>
                </el-row>

                <el-dialog title="查看代理区域" :visible.sync="dialogFormVisible" size="tiny">
                    <div class='checkImg2'>
                        <table class='dialogTable3' align="left">
                            <tr v-for='(item,index) in areaList' :key="index"><td>代理区域{{index+1}}</td><td>{{item}}</td></tr>
                        </table>
                    </div>
                    <div slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="dialogFormVisible=false">确定</el-button>
                    </div>
                </el-dialog>            

                <el-form-item class="footer">
                    <el-button @click="resetForm">返回</el-button>
                </el-form-item>
            </div>
        </el-form>
    </div>
</template>

<script>
import Levelbar from '../layout/Levelbar';
import {getAgentById} from 'api/accountMagement';
import { address} from 'api/examineMangement';
export default{
    name: 'agentDetail',
    components: { Levelbar },
    data() {
        return { 
            sOrgState: '',
            openAccount: '', // 开户许可证
            account: '', // 账户
            bankAddress: '', // 开户行所在城市
            userName: '', // 姓名
            cardNum: '', // 身份证
            cardFace: '', // 正面照
            cardBack: '', // 反面照
            proxyLetter: '', // 委托书
            licene: '', // 营业执照
            accountName: '', // 银行卡开户名
            bankName: '', // 所属银行
            openName: '', // 开户行名称
            telephone: '', // 电话号码
            orgType: '', // 机构类别
            orgName: '', // 机构名称
            finishTime: '', // 审核完成时间
            auditTime: '', // 审核时间
            reason: '', // 驳回理由
            peopleList: [], // 负责人列表
            orgAddress: '', // 机构地址
            resName: '',
            mobile: '',
            sName: '',
            areaList: '',
            dialogFormVisible: false // 负责人弹窗
        }
    },
    created() {
        this.getInfo();
    },
    methods: {
        // 提交
        getInfo() {
            getAgentById(this.$route.params.id).then(res => {
                this.sOrgState = res.data.content.sOrgState;
                this.sName = res.data.content.sName;
                this.userName = res.data.content.auditName;
                this.cardNum = res.data.content.fCardNum;
                this.accountName = res.data.content.sAccountName;
                this.account = res.data.content.fAccount;
                this.bankName = res.data.content.bankName;
                this.bankAddress = res.data.content.fBankProvince + res.data.content.fBankCity;
                this.openName = res.data.content.sOpenName;
                this.telephone = res.data.content.fTelphoneNum;
                this.licene = res.data.content.sBussinessLicene; 
                this.openAccount = res.data.content.sOpenAccount;
                this.proxyLetter = res.data.content.sProxyLetter;
                this.cardBack = res.data.content.sCardBack;
                this.cardFace = res.data.content.sCardFace;
                this.orgType = res.data.content.sOrgType;
                this.orgName = res.data.content.sOrgName;
                this.orgAddress = res.data.content.sOrgProvince + res.data.content.sOrgCity + res.data.content.sOrgArea;
                this.auditTime = res.data.content.sAuditTime;
                this.finishTime = res.data.content.sFinishTime;
                this.reason = res.data.content.sAuditFailure;
                this.resName = res.data.content.responsibleName;
                this.mobile = res.data.content.responsibleNumber;
                
            })
        },
        // 区域
        areaDetail() {
            address(this.$route.params.id).then(res => {
                this.areaList = res.data.content;
            })
            this.dialogFormVisible = true;
        },
        // 下载
        download(link) {
            if (link) {
                return link.split('/')[link.split('/').length-1];
            }
        },
        resetForm() {
            window.history.back();
        }
    }
}

</script>

<style lang="scss" scoped>
.app-container {
    position: relative;
    padding: 20px 20px 10px;
    .app-levelbar {
        height: 35px;
    }
    .table{
        text-align:left;
        th,td{
            padding:0 20px;
            width:200px;
            height:40px;
            font-size:14px;
        }
        a{
            font-size:15px;
            color:#ff5e2c;
        }
    }
    .el-form{
        .box{
            padding:0 50px;
        }
        box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        background:#fff;
        padding-bottom:50px;
        .appTop{
            margin: 40px 0;
            font-size: 14px;
            color: #333;
            line-height: 14px;
            border-left: 4px solid #ff5e2c;
            text-indent: 16px;
        }
        .appTitle{
            padding-top:8px;
            text-align: center;
            font-size: 18px;
            color: #333;
            line-height: 72px;
            font-weight: bold;
            font-family: Microsoft YaHei;
            border-bottom: 1px solid #ddd;
        }
        
        .footer {
            text-align: center;
            margin-top: 60px;
        }
    }
    .dialog-footer{
        .el-button{
            margin: 20px 0 10px 0;
        }
        text-align: center;
    }
    .dialogTable{
        text-align:center;
        margin-left:50px;
        th{
            background:#f3f3f3;
        }
        th,td{
            text-align:center;
            padding:0 20px;
            border: solid 1px #ECECEC;
            width:220px;
            height:60px;
        }
    }
    .dialog-footer3{
        .el-button{
            margin: 50px 0 10px 0;
        }
        text-align: center;
    }
    .dialogTable3{
        text-align:center;
        margin-top:30px;
        margin:30px 50px;
        tr td:nth-of-type(1){
            width:30%;
        }
        tr td:nth-of-type(2){
            width:310px;
        }
        th,td{
            text-align:center;
            padding:0 20px;
            border: solid 1px #ECECEC;
            width:220px;
            height:40px;
        }
    }
    
}

</style>
